<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'WebSocket'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_switch">
					<onekit-view onekit-class="weui-cell__bd">Socket状态</onekit-view>
					<onekit-view onekit-class="weui-cell__ft">
						<onekit-switch :disabled="!hasLogin" @Change="toggleSocket"></onekit-switch>
					</onekit-view>
				</onekit-view>
				<onekit-view onekit-class="weui-cell">
					<onekit-view onekit-class="weui-cell__bd">消息</onekit-view>
					<onekit-view onekit-class="weui-cell__ft">Hello, 小程序!</onekit-view>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="btn-area">
			<onekit-button type="primary" size="40" :disabled="socketStatus != 'connected'" :loading="loading" @Tap="sendMessage">点我发送</onekit-button>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "Web Socket",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
function showModal(title,content){
  wx.showModal({
      title,
      content,
      "showCancel":false
});
};
function showSuccess(title){
  wx.showToast({
      title,
      "icon":'success',
      "duration":1000
});
};
export default Page(ONEKIT_JSON,["hasLogin","socketStatus","loading"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'Web Socket',
        "path":'packageAPI/pages/web-socket/web-socket'
};
    },
    "data":{
        "socketStatus":'closed'
},
    "onLoad"(){
      const self = this;
      self.setData({
        "hasLogin":true
});
    },
    "onUnload"(){
      this.closeSocket();
    },
    "toggleSocket"(e){
      const turnedOn = e.detail.value;
      if((turnedOn) && this.data.socketStatus == 'closed')
      {
        this.openSocket();
      }
else
      if((!turnedOn) && this.data.socketStatus == 'connected')
        {
          const showSuccess = true;
          this.closeSocket(showSuccess);
        };
    },
    "openSocket"(){
      wx.onSocketOpen(()=>{
      console.log('WebSocket 已连接');
      showSuccess('Socket已连接');
      this.setData({
          "socketStatus":'connected',
          "waitingResponse":false
});
    });
      wx.onSocketClose(()=>{
      console.log('WebSocket 已断开');
      this.setData({
          "socketStatus":'closed'
});
    });
      wx.onSocketError((error)=>{
      showModal('发生错误',JSON.stringify(error));
      console.error('socket error:',error);
      this.setData({
          "loading":false
});
    });
      wx.onSocketMessage((message)=>{
      showSuccess('收到信道消息');
      console.log('socket message:',message);
      this.setData({
          "loading":false
});
    });
      wx.connectSocket({
        "url":'wss://echo.websocket.org'
});
    },
    "closeSocket"(){
      if(this.data.socketStatus == 'connected')
      {
        wx.closeSocket({
            "success":()=>{
              showSuccess('Socket已断开');
              this.setData({
                  "socketStatus":'closed'
});
            }
});
      };
    },
    "sendMessage"(){
      if(this.data.socketStatus == 'connected')
      {
        wx.sendSocketMessage({
            "data":'Hello, Miniprogram!'
});
      };
    }
});

</script>
<style 
 lang="css">
@import '/common/lib/weui.css';
</style>